<template>
  <div style="margin-left: auto;">
      <p>发货通知单</p>
  </div>
  <div style="right: auto;">
      <span>
          <el-button type="primary" @click="SalesOrderAdd()">保存</el-button>
      </span>
      <span>
          <el-button type="primary" disabled=""  @click="Examineandapprove()">审批</el-button>
      </span>
  </div>
  <hr>
  <el-scrollbar style="height: 320px;color: dimgray">
      <div class="scrollbar-flex-content">
          <p class="scrollbar-demo-item">
              <el-form :inline="true" :model="form" class="demo-form-inline">
                  <el-form-item label="单据编码：" style="width: 308px">
                      <el-input v-model="form.documentNumber" placeholder="" />
                  </el-form-item>
                  <el-form-item label="单据日期：" style="width: 308px">
                      <el-date-picker v-model="form.documentdate" type="date" />
                  </el-form-item>
                  <el-form-item label="单据状态：" style="width: 308px">
                      <el-input v-model="form.documentStatus" />
                  </el-form-item>
                  <el-form-item label="业务状态：" style="width: 308px">
                      <el-select v-model="form.businessStatus">
                          <el-option label="正常" value="正常" />
                          <el-option label="取消" value="取消" />
                      </el-select>
                  </el-form-item>
              </el-form>
              <el-form :inline="true" :model="form" class="demo-form-inline">
                  <el-form-item label="业务类型：" style="width: 308px">
                      <el-select v-model="form.businessType">
                          <el-option label="普通发货" value="普通发货" />
                          <el-option label="加急发货" value="加急发货" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label="操作员：" style="width: 308px">
                    <el-input v-model="form.documentStatus" />
                  </el-form-item>
                  <el-form-item label="审核员：" style="width: 308px">
                    <el-input v-model="form.documentStatus" />
                  </el-form-item>
                  <el-form-item label="审核日期：" style="width: 308px">
                    <el-input v-model="form.documentStatus" />
                  </el-form-item>
              </el-form>
              <el-form :inline="true" :model="form" class="demo-form-inline">
                  <el-form-item label="仓库：" style="width: 308px">
                    <el-select v-model="form.stash">
                          <el-option label="成品仓" value="成品仓" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label="客户名称：" style="width: 308px">
                      <el-input v-model="form.customername" />
                  </el-form-item><el-link type="primary" @click="form1.dialogTableVisible = true">选择</el-link>
                  <div>
                      <el-dialog v-model="form1.dialogTableVisible" title="选择客户" width="980">
                          <el-form :inline="true" :model="page" class="demo-form-inline">
                              <el-form-item label="客户名称">
                                  <el-input v-model="page.customerName" />
                              </el-form-item>
                              <el-form-item label="联系人">
                                  <el-input v-model="page.businessContacts" />
                              </el-form-item>
                              <el-button type="primary" @click="SearchCustomerProfilelist">搜索</el-button>
                          </el-form>
                          <el-table :data="CustomerProfilelist">
                              <el-table-column property="customerProfileId" label="序号" width="150" />
                              <el-table-column property="customerName" label="客户名称" width="200" />
                              <el-table-column property="warehouseName" label="联系人" />
                              <el-table-column property="phone" label="手机号" />
                              <el-table-column property="states" label="状态">
                                  <template #default="scope">
                                      <el-switch v-model="scope.row.states" disabled="true" />
                                  </template>
                              </el-table-column>
                              <el-table-column label="操作">
                                  <template #default="scope">
                                      <el-button type="primary"
                                          @click="SelectName(scope.row.customerName)">选择</el-button>
                                  </template>
                              </el-table-column>
                          </el-table>
                          <table>
                              <tr>
                                  <td>
                                      <el-pagination v-model:current-page="page.PageIndex"
                                          v-model:page-size="page.PageSize" :page-sizes="[1, 2, 3, 4]" :size="false"
                                          :disabled="false" :background="true" layout="slot,total"
                                          :total="page.totalCount" prev-text="上一页" next-text="下一页"
                                          @size-change="handleSizeChange" @current-change="handleCurrentChange">
                                      </el-pagination>
                                  </td>
                                  <br>
                                  <td>
                                      <el-pagination v-model:current-page="page.PageIndex"
                                          v-model:page-size="page.PageSize" :page-sizes="[1, 2, 3, 4]" :size="false"
                                          :disabled="false" :background="true" layout="slot, sizes,prev, pager, next"
                                          :total="page.totalCount" prev-text="上一页" next-text="下一页"
                                          @size-change="handleSizeChange" @current-change="handleCurrentChange">
                                          <button @click="handleCurrentChange(1)"
                                              :disabled="page.PageIndex == 1">首页</button>
                                      </el-pagination>
                                  </td>
                                  <br>
                                  <td>
                                      <el-pagination v-model:current-page="page.PageIndex"
                                          v-model:page-size="page.PageSize" :page-sizes="[1, 2, 3, 4]" :size="false"
                                          :disabled="false" :background="true" layout="slot, jumper"
                                          :total="page.totalCount" prev-text="上一页" next-text="下一页"
                                          @size-change="handleSizeChange" @current-change="handleCurrentChange">
                                          <button @click="handleCurrentChange(page.pageCount)"
                                              :disabled="page.PageIndex == page.pageCount">尾页</button>
                                      </el-pagination>
                                  </td>
                              </tr>
                          </table>
                      </el-dialog>
                  </div>
                  <el-form-item label="进仓编号：" style="width: 308px">
                      <el-input v-model="form.warehouseentry" />
                  </el-form-item>
                  <el-form-item label="交付日期：" style="width: 308px">
                    <el-date-picker
                      v-model="form.deliverydate"
                      type="date"
                    />
                  </el-form-item>
              </el-form>
              <el-form :inline="true" :model="form" class="demo-form-inline">
                  <el-form-item label="收货人：" style="width: 308px">
                      <el-input v-model="form.consignee" />
                  </el-form-item>
                  <el-form-item label="电话：" style="width: 308px">
                      <el-input v-model="form.consigneePhone" />
                  </el-form-item>
                  <el-form-item label="地址" style="width: 308px">
                    <el-input v-model="form.consigneeAddress" />
                  </el-form-item>
                  <el-form-item label="备注信息：" style="width: 308px">
                    <el-input v-model="form.consigneeInfo" type="textarea" style="width: 250px;height: 5px;" />
                  </el-form-item>
              </el-form>
              <el-form :inline="true" :model="form" class="demo-form-inline">
                  <el-form-item label="运费：" style="width: 308px">
                      <el-input v-model="form.freight" />
                  </el-form-item>
                  <el-form-item label="装卸费：" style="width: 308px">
                      <el-input v-model="form.handlingcharges" />
                  </el-form-item>
                  
              </el-form>
          </p>
      </div>
  </el-scrollbar>
  <el-button type="primary" @click="add">物料信息</el-button>
    <table style="border-collapse:collapse">
        <tr>
            <td>序号</td>
            <td>销售订单号</td>
            <td>物料编码</td>
            <td>物料名称</td>
            <td>型号规格</td>
            <td>主计量</td>
            <td>数量</td>
            <td>件数</td>
            <td>备注</td>
            <td>操作</td>
        </tr>
        <tr v-for="(ruleForm, index) in loge.healthArray">
            <td>
                {{ ruleForm.salesOrderMaterialId }}
            </td>
            <td>
                {{ ruleForm.documentNumber }}
                <el-link type="primary" @click="xuanze(index)">选择</el-link>
                <div>
                  <el-dialog v-model="form1.dialogTableVisible111" title="销售发货" width="1100">
                      <div class="common-layout">
                          <el-form :inline="true" :model="page" class="demo-form-inline">
                              <el-form-item label="销售单号">
                                  <el-input v-model="formInline.documentNumber" />
                              </el-form-item>
                              <el-form-item label="客户名称">
                                  <el-input v-model="formInline.materialName" />
                              </el-form-item>
                              <el-button type="primary" @click="SearchMaterialsShow">搜索</el-button>
                          </el-form>
                          <el-table :data="suppliers" style="height: 500px;">
                              <el-table-column property="documentNumber" label="销售订单号" width="150" />
                              <el-table-column property="customerProfileName" label="客户" width="200" />
                              <el-table-column property="itemBianma" label="物料编码" />
                              <el-table-column property="materialName" label="物料名称" />
                              <el-table-column property="quantity" label="主计量" />
                              <el-table-column property="measureId" label="订单数量" />
                              <el-table-column property="unitPrice" label="已发数量" />
                              <el-table-column property="amount" label="未发数量" />
                              <el-table-column label="操作">
                                  <template #default="scope">
                                    
                                        <el-button type="primary"
                                            @click="Selectnumber(scope.row.documentNumber, scope.row.itemBianma, scope.row.materialName,scope.row.measureId,scope.row.unitPrice, scope.row.typeSpecification, index1)">选择</el-button>
                                    
                                  </template>
                              </el-table-column>
                          </el-table>
                      </div>

                  </el-dialog>

                </div>
            </td>
            <td>
                {{ ruleForm.itemBianma }}
            </td>
            <td>
                {{ ruleForm.materialName }}
            </td>
            <td>
              {{ ruleForm.typeSpecification }}
                
            </td>
            <td>
              <el-select v-model="ruleForm.noteInformation" placeholder="请选择" style="width: 100px">
                    <el-option lable="台" value="台"></el-option>
                    <el-option lable="件" value="件"></el-option>
                    <el-option lable="个" value="个"></el-option>
                    <el-option lable="盒" value="盒"></el-option>
                </el-select>
            </td>
            <td>
              <el-input v-model="form.numberpack" style="width: 100px">
                </el-input>
            </td>
            <td>
              <el-input v-model="form.quantity" style="width: 100px">
                </el-input>
            </td>
            <td>
                <el-input v-model="form.shippingnoteRemark" style="width: 100px">
                </el-input>
            </td>
            <td>
                <el-link style="color: red;" @click="del">删除</el-link>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import Cookie from 'cookies-ts'
import axios from 'axios'
import { number } from 'echarts'
const router = useRouter()
const route = useRoute()
const apiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const cpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
const form1 = reactive({
    dialogTableVisible: false,
    dialogTableVisible111: false,
})
onMounted(() => {
    SearchCustomerProfilelist();
    SearchMaterialsShow();
    GetSuppliers();
})

//选择客户表 反填客户名称
const SelectName = (customerName: any) => {
    localStorage.setItem('customerName', customerName)
    if (localStorage.getItem('customerName') != null) {
        form.customername = localStorage.getItem('customerName') as string
    }
    form1.dialogTableVisible = false
}
const index1 = ref(0)
const xuanze = (index: any) => {
    form1.dialogTableVisible111 = true
    index1.value = index
}

const Examineand = reactive({
  workid:1,
  username:'zhangsan',
  uSerid:1,
  workType:1,
  gnumid:'hsajdjk'
})




//审批流程
const Examineandapprove=()=>{
  axios.post('http://localhost:5020/api/SalesManagementWrite/ProcessFlowEngineHandle',Examineand).then(res=>{
    if(res.data.code==1)
    {
      ElMessage.success(res.data.msg)
      if(res.data.msg=='审批成功')
      {
        form.documentStatus='审批中'
      }
      else if(res.data.msg=='撤销成功')
      {
        form.documentStatus='开立'
      }

    }
  }).then(err=>{

  })
}


const cookie = new Cookie()
 const form = reactive({
   documentNumber: "",
   documentdate: "",
   documentStatus: "开立",
   businessStatus: "",
   businessType: "销售订单",
   stash: 0,
   customername: "",
   warehouseentry: "",
   deliverydate: "",
   consignee: "",
   consigneePhone: "",
   consigneeAddress: "",
   consigneeInfo: "",
   freight: "",
   handlingcharges: 2,
   returnNoticesId: 2,
   salesOrderId: 1,
   numberpack:10,
   quantity:8,
   shippingnoteRemark:""
 })
// const form = reactive({
//     "documentNumber": "",
//     "documentDate": "",
//     "documentStatus": "",
//     "documentType": "",
//     "businessType": "",
//     "businessStatus": "",
//     "salesDepartmentName": 0,
//     "salesStaff": "",
//     "operatorName": "",
//     "salesType": "",
//     "modeDelivery": "",
//     "customerProfileName": "",
//     "contractNumber": "",
//     "paymentTerms": "",
//     "deliverDate": "",
//     "deliveryStatus": 2,
//     "consignee": "",
//     "phone": "",
//     "address": "",
//     "destinationCountry": "",
//     "noteInformation": "",
//     "itemBianma": localStorage.getItem('itemBianma') as string,
// })



const formInline = reactive({
    documentNumber: '',
    customerProfileName: '',
    salesStaff: '',
    materialName: '',
    salesType: '',
    pageIndex: 1,
    pageSize: 10,
    pageCount: 0,
    totalCount: 0,

})


const jisuan = (index: number) => {
    var price = loge.healthArray[index].unitPrice
    var num = loge.healthArray[index].quantity
    loge.healthArray[index].amount = price * num

}
const filterNode = (value: string, data: any) => {
    if (!value) return true;
    return data.label.includes(value);
};
 const Selectnumber = (documentNumber: any, itemBianma: any, materialName: any, measureId: any, unitPrice: any,typeSpecification:any, index: any) => {
     console.log(index)
     localStorage.setItem('documentNumber', documentNumber)
     localStorage.setItem('itemBianma', itemBianma)
     localStorage.setItem('materialName', materialName)
     localStorage.setItem('measureId', measureId)
     localStorage.setItem('unitPrice', unitPrice)
     localStorage.setItem('typeSpecification', typeSpecification)
     localStorage.setItem('index', index)
     if (localStorage.getItem('itemBianma') != null || localStorage.getItem('itemName') != null || localStorage.getItem('modelspecification') != null || localStorage.getItem('measureId') != null) {
         loge.healthArray[index].itemBianma = localStorage.getItem('itemBianma') as string
         loge.healthArray[index].materialName = localStorage.getItem('itemName') as string
         loge.healthArray[index].typeSpecification = localStorage.getItem('modelspecification') as string
         
         loge.healthArray[index].noteInformation = localStorage.getItem('noteInformation') as string
         loge.healthArray[index].quality = localStorage.getItem('quality') as string
         loge.healthArray[index].packing = localStorage.getItem('packing') as string
     }
     console.log(loge.healthArray[index])
     form1.dialogTableVisible111 = false
 }

const handleNodeClick = (data: any) => {

    uptform.materialTypeName = data.label
    uptform.pId = data.value
    console.log(uptform.pId)
}
const uptform = reactive({
    materialTypeName: '',
    pId: 0,
});


//新增行序号
const numbers = ref(1)
const loge = reactive({
    healthArray: <any>[
        reactive({
            salesOrderMaterialId: numbers.value,
            itemBianma: "",
            materialName: "",
            typeSpecification: "",
            documentNumber:"",
            noteInformation:"",
            quality:"",
            packing:""
        })
    ]
});
const aaa = cookie.get('employeeName')
console.log(aaa)
//新增行
const add = () => {
    loge.healthArray.push(reactive({
        salesOrderMaterialId: loge.healthArray.length + numbers.value,
        itemBianma: "",
            materialName: "",
            typeSpecification: "",
            documentNumber:"",
            noteInformation:"",
            quality:"",
            packing:""
    }))
}
//删除行
const del = () => {
    loge.healthArray.splice(loge.healthArray.length - 1, 1)
    ElMessage.warning({
        message: '删除成功',
    })
}
const Materials = reactive({
    itemBianma: "",
    itemName: ""
})
const MaterialsShowlist = ref([])
const SearchMaterialsShow = () => {
    axios.get(bpiurls + '/api/Materials/MaterialesSearch', {
        params: {
            materialTypeId: uptform.pId,
            itemBianma: Materials.itemBianma,
            itemName: Materials.itemName
        }
    }).then((res) => {
        MaterialsShowlist.value = res.data.data2
        console.log(MaterialsShowlist.value);
    })
}
const page = reactive({
    customerName: "",
    businessContacts: "",
    PageIndex: 1,
    PageSize: 100,
    totalCount: 0,
    pageCount: 0,
})
const handleSizeChange = (val: number) => {
    page.PageSize = val;
    SearchCustomerProfilelist();
}
const handleCurrentChange = (val: number) => {
    page.PageIndex = val;
    SearchCustomerProfilelist();
}
const CustomerProfilelist = ref([])
const SearchCustomerProfilelist = () => {
    axios.post(cpiurls + '/api/SalesOrder/SearchCustomerProfile', {
        customerName: page.customerName,
        businessContacts: page.businessContacts,
        PageIndex: page.PageIndex,
        PageSize: page.PageSize
    }).then((res) => {
        CustomerProfilelist.value = res.data.data
        page.totalCount = res.data.totalCount
        page.pageCount = res.data.pageCount;
    })



    axios.post(cpiurls + '/api/SalesOrder/SearchCustomerProfile', {
        customerName: page.customerName,
        businessContacts: page.businessContacts,
        PageIndex: page.PageIndex,
        PageSize: page.PageSize
    }).then((res) => {
        CustomerProfilelist.value = res.data.data
        page.totalCount = res.data.totalCount
        page.pageCount = res.data.pageCount;
    })
}




//销售订单单据列表
const suppliers: any = ref([]);
const GetSuppliers = () => {
    axios
        .get(
            cpiurls + '/api/SalesOrder/SearchSalesOrderDetail',
            {
                params: {
                    documentNumber: formInline.documentNumber,
                    materialName: formInline.materialName,
                    salesStaff: formInline.salesStaff,
                    customerProfileName: formInline.customerProfileName,
                    salesType: formInline.salesType,
                    pageIndex: formInline.pageIndex,
                    pageSize: formInline.pageSize,
                }
            }
        )
        .then((res) => {
            console.log(res.data.data);
            suppliers.value = res.data.data.list;
            formInline.pageCount = res.data.data.pageCount;
            formInline.totalCount = res.data.data.totalCount;
        })
        .catch((err) => {
            console.log(err);
        });
};








//发货通知单添加
const SalesOrderAdd = () => {
  console.log(loge.healthArray);
  axios.post(apiurls+'/api/SalesManagementWrite/DeliverynoticeCreateHandle', form)
      .then((res) => {
          if (res.data.code == 0) {
              ElMessage({
                  message: '新增成功',
                  type: 'success',
              })
              // router.push('/SalesOrder')
          } else {
              ElMessage({
                  message: '新增失败',
                  type: 'error',
              })
          }
      })
      .catch((err) => {
          console.log(err)
      })
}



</script>

<style scoped>
.scrollbar-flex-content {
  display: flex;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1800px;
  height: 300px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
}
</style>
<style scoped>
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

/* 设置第一行的 td 顶部边框加粗并设置为红色 */
table tr:first-child td {
  border-top: 1px solid #ccc;
  /* 设置顶部边框为3px宽度的红色 */
  padding: 10px;
  text-align: center;
}

/* 设置 td 的样式 */

table td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 14px;
  height: 60px;
  width: 150px;
  white-space: nowrap;
  /* 防止内容换行 */
}

/* 可选：为 table 添加样式 */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/*______________________________________________________*/

.table-container {
  max-width: 100%;
  overflow-x: auto;
  /* 启用水平滚动 */
  margin: 20px 0;
  /* 设置容器的外边距 */
}

/* :deep(.el-input__wrapper) {
  box-shadow: none;
  text-align: center;
}

:deep(.el-select__wrapper) {
  box-shadow: none;
}

::v-deep(.center-input .el-input__inner) {
  text-align: center;
} */
</style>